<template>
  <view class="createDiscussionForm">
    <view class="item">
      <text>标题</text>
      <view class="inputBox">
        <input
          type="text"
          placeholder="请输入标题"
          class="discussionInput"
          v-model="discussionDetail.title"
        />
      </view>
    </view>
    <view class="item" @click="showCategary">
      <text>分类</text>
      <view class="inputBox">
        <view class="categaryBox">
          <text class="categaryText">{{
            categaryIndex === -1 ? "待选" : categaryList[categaryIndex]
          }}</text>
        </view>
      </view>
    </view>
    <view class="item">
      <text>内容</text>
      <view class="inputBox">
        <textarea
          :maxlength="200"
          class="areaInput"
          v-model="discussionDetail.content"
        ></textarea>
      </view>
    </view>

    <view class="item">
      <text>图片</text>
      <van-uploader
        class="uploadPic"
        :file-list="fileList"
        @after-read="handleChoosePic"
        :max-size="2100000"
        :max-count="3"
      />
    </view>
    <view class="btnItem">
      <van-button block class="myBtn" color="#aaa" @click="handleCloseForm"
        >取消</van-button
      >
      <van-button
        block
        class="myBtn"
        color="#05A47D"
        :disabled="btnLoading"
        @click="handleSubmitDiscussion"
        >发布内容</van-button
      >
    </view>
  </view>
</template>

<script>
import { mapState } from "vuex";
export default {
  name: "DiscussionForm",
  data() {
    return {
      categaryList: ["竞赛相关", "游戏相关", "学习经验", "学习问题"],
      categaryIndex: -1,
      contentValue: "",
      fileList: [],
      discussionDetail: {
        author: {},
        title: "",
        content: "",
        categary: "",
        liked: 0,
        collection: 0,
        commentList: [],
        commentCount: 0,
      },
      btnLoading: false,
    };
  },
  computed: { ...mapState(["userInfo"]) },
  methods: {
    showCategary() {
      wx.showActionSheet({
        itemList: this.categaryList,
        success: (res) => {
          console.log(res);
          this.categaryIndex = res.tapIndex;
          this.discussionDetail.categary =
            this.categaryList[this.categaryIndex];
        },
        fail: (res) => {
          console.log(res.errMsg);
        },
      });
    },

    handleChoosePic(event) {
      const { file } = event.detail;
      const item = {};
      console.log(file);
      item.url = file.url;
      item.name =
        Math.floor(new Date().getTime() / 1000) + "-" + this.userInfo.nickName;
      item.deletable = true;
      item.file = file;
      this.fileList.push(item);
    },

    // 上传讨论内容
    async handleSubmitDiscussion() {
      this.btnLoading = true;
      if (this.validPayload()) {
        this.initAuthorInfo(this.userInfo);
        this.$store.commit(
          "m_discussion/setDiscussionDetail",
          this.discussionDetail
        );
        uni.showLoading({
          title: "发布中",
          mask: true,
        });
        try {
          // 先进行图片上传
          await this.$store.dispatch(
            "m_discussion/uploadMultipleFile",
            this.fileList
          );
          await this.$store.dispatch("m_discussion/uploadDiscussionDetail");
          uni.hideLoading();
          uni.showToast({
            icon: "success",
            title: "发布成功",
            duration: 1000,
          });
          this.handleCloseForm();
        } catch (err) {
          console.log(err);
          uni.hideLoading();
          uni.showToast({
            icon: "error",
            title: "发布失败",
            duration: 1000,
          });
        }
      }
      this.btnLoading = false;
    },

    // 关闭表单，清空数据
    handleCloseForm() {
      this.discussionDetail.title = "";
      this.discussionDetail.categary = "";
      this.discussionDetail.content = "";
      this.fileList = [];
      this.$emit("closeForm");
    },

    initAuthorInfo(userInfo) {
      this.discussionDetail.author.nickName = userInfo.nickName;
      this.discussionDetail.author.avatar = userInfo.avatar;
      this.discussionDetail.createTime = new Date();
    },

    // 校验讨论参数
    validPayload() {
      if (!this.userInfo.avatar.length || !this.userInfo.nickName.length) {
        uni.showToast({
          icon: "error",
          title: "请先进行登录",
          duration: 1000,
        });
        return false;
      }
      if (!this.discussionDetail.title.trim().length) {
        uni.showToast({
          icon: "error",
          title: "请输入标题",
          duration: 1000,
        });
        return false;
      }
      if (
        this.discussionDetail.title.length < 5 ||
        this.discussionDetail.title.length > 20
      ) {
        uni.showToast({
          icon: "error",
          title: "标题5-20个字符",
          duration: 1000,
        });
        return false;
      }
      if (this.categaryIndex === -1) {
        uni.showToast({
          icon: "error",
          title: "请选择分类",
          duration: 1000,
        });
        return false;
      }
      if (!this.discussionDetail.content.trim().length) {
        uni.showToast({
          icon: "error",
          title: "请输入内容",
          duration: 1000,
        });
        return false;
      }
      if (this.discussionDetail.content.length >= 200) {
        uni.showToast({
          icon: "error",
          title: "内容不超过200字",
          duration: 1000,
        });
        return false;
      }

      return true;
    },
  },
};
</script>

<style lang="scss" scoped>
.createDiscussionForm {
  width: 100%;
  height: 100%;
  padding: 20rpx;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  .inputBox {
    padding: 10rpx 20rpx;
    width: 85%;
    background-color: #eee;
    border-radius: 20rpx;
    margin-top: 20rpx;
  }
  .discussionInput {
    width: 100%;
    height: 60rpx;
  }
  .areaInput {
    background-color: #eee;
    width: 90%;
    height: 140rpx;
  }
  .categaryBox {
    width: 90%;
    height: 60rpx;
    .categaryText {
      display: inline-block;
      line-height: 50rpx;
      color: rgb(137, 137, 137);
      margin-top: 5rpx;
      margin-left: 5rpx;
    }
    border-radius: 20rpx;
  }
  .item {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    font-size: 28rpx;
    color: #aaa;
    margin-bottom: 30rpx;
  }
  .btnItem {
    width: 100%;
    display: flex;
    justify-content: space-around;
    .myBtn {
      width: 200rpx;
      margin-right: 50rpx;
    }
  }
  .uploadPic {
    margin-top: 20rpx;
  }
}
</style>
